<template>
  <div>
    <Container class="u-mb15">
      <!-- 筛选 -->
      <el-form :model="pageData" :rules="pageRules" ref="pageForm">
        <ContainerTitle> 配置推送钉钉群</ContainerTitle>
        <el-form-item label="钉钉群来源">
          <el-radio-group v-model="pageData.type">
            <el-radio :label="0">已有钉钉群</el-radio>
            <el-radio :label="1">新增钉钉群</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="钉钉群名称" v-if="pageData.type == 0" prop="name">
          <el-select
            class="u-w350"
            size="mini"
            filterable
            placeholder="请选择钉钉群名称"
            v-model="pageData.name"
          >
            <el-option
              v-for="item in dingOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="钉钉群名称" v-if="pageData.type == 1" prop="names">
          <el-input
            class="u-w350"
            size="mini"
            placeholder="请填写钉钉群名称"
            v-model="pageData.names"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="钉钉群链接" v-if="pageData.type == 1" prop="link">
          <el-input
            type="textarea"
            class="u-w350"
            size="mini"
            placeholder="请填写钉钉群链接"
            v-model="pageData.link"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <div>
            <img src="../../assets/img/dd-group.jpg" alt="" />
          </div>
        </el-form-item>
      </el-form>
    </Container>
    <Affix :offset-bottom="0">
      <ButtonGroup isFixed align="right">
        <el-button size="small" @click="$router.back()">返回</el-button>
        <el-button size="small" type="primary" @click="handleEnsure"
          >确定</el-button
        >
      </ButtonGroup>
    </Affix>
  </div>
</template>
  <script>
import ContainerTitle from "@/components/container-title";
import Container from "@/components/container";
import Affix from "@/components/affix";
import ButtonGroup from "@/components/button-group";
export default {
  components: {
    ContainerTitle,
    Container,
    Affix,
    ButtonGroup,
  },
  data() {
    return {
      productOptions: [],
      dingOptions: [],
      ids: "",
      pageData: {
        type: 0,
        name: "",
        names: "",
        link: "",
      },
      pageRules: {
        name: {
          required: true,
          message: "请选择钉钉群名称",
          trigger: ["blur"],
        },
        names: {
          required: true,
          message: "请填写钉钉群名称",
          trigger: ["blur"],
        },
        link: {
          required: true,
          message: "请填写钉钉群链接",
          trigger: ["blur"],
        },
      },
    };
  },
  methods: {
    handleEnsure() {
      let dingName = [],
        webhook = [];
      // console.log(this.pageData.name);
      if (this.pageData.type == 0) {
        this.dingOptions.forEach((item) => {
          if (this.pageData.name == item.id) {
            dingName.push(item.name);
            webhook.push(item.url);
          }
          /* this.pageData.name.forEach((items) => {
            if (item.id == items) {
              dingName.push(item.name);
              webhook.push(item.url);
            }
          }); */
        });
      } else {
        dingName.push(this.pageData.names);
        webhook.push(this.pageData.link);
      }
      this.$refs.pageForm.validate((valid) => {
        if (valid) {
          this.$http({
            method: "post",
            url: "/marketing/api/daily_report/configDing",
            data: {
              dingName: dingName.join(),
              ids: this.ids,
              type: this.pageData.type,
              webhook: webhook.join(),
            },
          }).then((res) => {
            if (res.data.code === 1) {
              this.$message.success(res.data.msg);
              this.$router.back();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },
    // 下拉
    fetchDingOptions() {
      this.$http({
        method: "get",
        url: "/marketing/api/daily_report/getDingList",
      }).then((res) => {
        if (res.data.code === 1) {
          this.dingOptions = res.data.data;
          /* if (this.$route.query.dingId) {
            this.filter.dingId = Number(this.$route.query.dingId);
          } */
        }
      });
    },
  },
  created() {
    console.log(this.$route.query.ids);
    this.ids = this.$route.query.ids;
    this.fetchDingOptions();
  },
};
</script>
<style scoped>
img {
  /* width: 100%; */
  display: block;
  /* margin: 0 auto; */
}
</style>
